<template>
  <el-dialog
    :title="!dataForm.id ? '预览' : '预览'"
    :close-on-click-modal="false"
    width="30%"
    :visible.sync="visible">
      <div class="center">
        <div class="bg-phone">
          <div class="bg-phone-content">
            <!-- <img :src="dataForm.screen" v-show="activePic == 1" style="width:100%;height:auto"> -->
            <img :src="previewimage" style="width:100%;height:auto">
            <!-- 组件字段内容 判断是时间组件还是照片组件 -->
            <div>
              <!-- <div id="previewdiv" :style="'color:#' + dataForm.color + ';font-size:' + (parseInt(dataForm.fontSize) / 1.4) + 'px;font-family: '+ dataForm.fontName +';font-weight: bold;font-style: italic;position: absolute;'">{{dataTime}}</div> -->
              <div v-for="(item,index) in labelsValues" :id="item.id" :style="item.styles" :key="index">{{item.value}}</div>
            </div>
          </div>
        </div>
      </div>
  </el-dialog>
</template>

<script>
import { parseTime } from '@/utils'
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          id: 0,
          themeId: '',
          themeName: '',
          themeWidgeId: '',
          themeWidgeType: '',
          themeWidgetClassify: '',
          type: '',
          fontSize: '',
          fontName: '',
          color: '',
          xscale: '',
          yscale: '',
        },
        dataRule: {
          themeWidgeId: [
            { required: true, message: '组件id不能为空', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '组件类型：如yyyy-MM-dd不能为空', trigger: 'blur' }
          ],
          fontSize: [
            { required: true, message: '字体大小不能为空', trigger: 'blur' }
          ],
          fontName: [
            { required: true, message: '字体不能为空', trigger: 'blur' }
          ],
          color: [
            { required: true, message: '颜色值：如FFFFFF不能为空', trigger: 'blur' }
          ],
          xscale: [
            { required: true, message: 'X周布位置不能为空', trigger: 'blur' }
          ],
          yscale: [
            { required: true, message: 'Y周布位置不能为空', trigger: 'blur' }
          ],
        },
        theme: {},
        themeList: [],
        themeWidge: {},
        themeWidgeList: [],
        widgetClassifyList:[
          {
            "id": 1,
            "name": "时间组件",
          }, {
            "id": 2,
            "name": "照片组件",
          }
        ],
        previewimage: '', // 预览图片
        dataTime: '',
        imgheight: 0,
        labels: [],
        labelsValues: []
      }
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          // this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/theme/theme-widge-layout/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                console.log('data')
                console.log(data)
                this.dataForm.themeWidgeId = data.themeWidgeLayout.themeWidgeId
                this.dataForm.type = data.themeWidgeLayout.type
                this.dataForm.fontSize = data.themeWidgeLayout.fontSize
                this.dataForm.fontName = data.themeWidgeLayout.fontName
                this.dataForm.color = data.themeWidgeLayout.color
                this.dataForm.xscale = data.themeWidgeLayout.xscale
                this.dataForm.yscale = data.themeWidgeLayout.yscale
                //根据组件id查找主题组件和组件详情：
                this.getThemeWidgeInfo(this.dataForm.themeWidgeId)
              }
            })
          }
        })
        this.initThemeList()
      },
      initThemeList () {
        this.themeList = []
        this.$http({
          url: this.$http.adornUrl('/theme/theme-list/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': 1,
            'limit': 10000
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.themeList = data.page.list
          }
        })
      },
      // 筛选类型
      onSelectTheme (val) {
        this.themeList.forEach((item, index) => {
          if (item.id === val){
            this.theme = item
          }
        })
        this.dataForm.themeId = val
        this.initThemeWidgeList()
      },
      // 筛选类型
      onSelectWidgetClassify (val) {
        this.dataForm.themeWidgetClassify = val
        this.initThemeWidgeList()
      },
      initThemeWidgeList () {
        this.themeWidgeList = []
        this.$http({
          url: this.$http.adornUrl('/theme/theme-widge/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': 1,
            'limit': 10000,
            'themeId': this.dataForm.themeId,
            'widgetClassify': this.dataForm.themeWidgetClassify
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.themeWidgeList = data.page.list
          }
        })
      },
      // 筛选类型
      onSelectThemeWidge (val) {
        this.themeWidgeList.forEach((item, index) => {
          if (item.id === val){
            this.themeWidge = item
          }
        })
        this.dataForm.themeWidgeId = this.themeWidge.id
        console.log(this.theme)
        console.log(this.themeWidge)
      },
      getThemeWidgeInfo(themeWidgeId){
        console.log(themeWidgeId)
        this.previewimage = ''
        this.$http({
          url: this.$http.adornUrl(`/theme/theme-widge/info/${themeWidgeId}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log('getThemeWidgeInfo')
            console.log(data)
            this.dataForm.themeId = data.themeWidge.themeId
            this.dataForm.themeName = data.themeWidge.themeName
            this.dataForm.themeWidgeType = data.themeWidge.widgetType
            this.dataForm.themeWidgetClassify = data.themeWidge.widgetClassify
            this.previewimage = data.themeWidge.image
            this.labels = data.themeWidge.labels

            var img_url = this.previewimage
            
            // 创建对象
            var img = new Image()
            let imgheight = 0
            // 改变图片的src
            img.src = img_url
            img.onload = function(){
                // 打印
                // alert('width:'+img.width+',height:'+img.height)
                // 获取宽度比例求div中的高度
              // let scale = 300 /img.width
              // imgheight = scale * img.height
              imgheight = 150
              getStylesVal(imgheight)
            }
            
            this.initThemeWidgeList()
            let that = this
            function getStylesVal(imgheight) {
            that.labelsValues = []
            that.labels.forEach(item => {
              const l = {}
              l.id = item.id
              if (item.type == 'weekday') {
                l.value = '星期' + parseTime(new Date(),'{a}')
              } else if (item.type == 'yyyy.MM.dd ' || item.type == 'yyyy.MM.dd') {
                l.value = parseTime(new Date(),'{y}.{m}.{d}')
              } else if (item.type == 'HH:mm') {
                l.value = parseTime(new Date(),'{h}:{i}')
              } else {
                l.value = parseTime(new Date(),'{h}:{i}')
              }
              if (parseInt(item.fontSize)> 45) {
                item.fontSize = item.fontSize - 5
              }
              l.styles = 
                ' color: #' +item.color + ';font-size:' +
                parseInt(item.fontSize) + 'px;font-family: '+
                item.fontName +';position: absolute;left:' +
                300 * item.xscale + 'px;top:' +(imgheight * item.yscale + (parseInt(item.fontSize) -25))  + 'px;'
              that.labelsValues.push(l)
            })
            }
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/theme/theme-widge-layout/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'themeWidgeId': this.dataForm.themeWidgeId,
                'type': this.dataForm.type,
                'fontSize': this.dataForm.fontSize,
                'fontName': this.dataForm.fontName,
                'color': this.dataForm.color,
                'xscale': this.dataForm.xscale,
                'yscale': this.dataForm.yscale,
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
.center{
  margin: 0 auto;
  text-align: center;
}
.bg-phone {
  /* background: url('../../../assets/img/phone.png') no-repeat;
  background-size: 100%; */
  width: 360px;
  height: 610px;
  padding:50px 30px 30px 30px;
  margin: 0 auto;
}
.bg-phone-content {
  /* background: #fff; */
  height: 560px;
  border-radius: 5px;
  position: relative;
}
</style>